<template>
  <div class="app-container">
    <el-form :model="queryParams" style="width: 100%;" ref="queryForm" size="small" :inline="true" label-width="68px">


      <el-form-item label="请扫码" prop="ipaddr">
        <el-input style="" v-model="queryParams.goodCode" placeholder="请将光标置于此处" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户名称" style="display:none" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="enterQuery">确认下单</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>
    <span>订单总额：{{ totalMoney }}</span>
    <el-table v-loading="loading" :data="goodList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column label="主键" align="center" prop="id" /> -->
      <el-table-column label="商品名称" align="center" prop="goodName" />
      <el-table-column label="商品图片" align="center" prop="goodImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.goodImg" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="商品单价" align="center" prop="retailPrice" />
      <el-table-column label="商品数量" align="center" prop="goodCount" />

    </el-table>
    <printe-order ref="printerOrder" :orderLists="orderLists" class="invisible-element" />
  </div>
</template>

<script>
import { supplierGood, listGood, getGood, delGood, addGood, updateGood, outBound } from "@/api/fx/suppliergood";
import dayjs from "dayjs";
import PrinteOrder from '@/components/Printer'
export default {
  name: "Banner",
  components: { PrinteOrder },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // banner图片表格数据
      goodList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      totalMoney: 0.00,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodCode: ""
      },
      // 表单参数
      form: {},
      //判断是否第一次进入的标识
      goodCodekey: 0,
      //扫码截取多余字符
      goodCodeLength: "",
      idxn: 5,
      orderLists: {
        fxOrderItemList: []
      }
    };
  },
  watch: {
    'queryParams.goodCode'(newName, oldName) {
      if (newName == "") {
        this.goodCodeLength = ''
      };
    }
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    /** 查询banner图片列表 */
    getList() {

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      // this.resetForm("form");
      this.goodList = [];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.goodCode == '' || this.queryParams.goodCode == ' ') {
        this.$modal.msgError("请扫码");
        return false
      }
      if (this.goodCodekey == 1) {
        this.queryParams.goodCode = this.queryParams.goodCode.slice(this.goodCodeLength.length)
      }
      this.idxn = 1;
      supplierGood(this.queryParams.goodCode).then(response => {
        if (response.code == 200 && response.data) {
          response.data.goodCount = 1;
          if (this.goodList.length == 0) {
            this.goodList.push(response.data);
          } else {
            let index = this.goodList.findIndex(item => item.goodId == this.queryParams.goodCode)
            if (index == -1) {
              this.goodList.push(response.data);
            } else {
              this.goodList[index].goodCount += 1
            }
            // for (var i = 0; i < this.goodList.length; i++) {
            //   if (this.idxn == this.goodList[i].id) {
            //     this.goodList[i].goodCount += 1;
            //     this.totalMoney = this.totalMoney + response.data.retailPrice;
            //     return false
            //   }
            // }
          }
          // this.totalMoney = this.totalMoney + response.data.retailPrice;
          this.totalMoney = 0
          let money = 0
          this.goodList.forEach(item => money += item.retailPrice * item.goodCount)
          this.totalMoney = money.toFixed(2)
          this.queryParams.goodCode = ''
          this.$modal.msgSuccess("添加成功......");
          this.goodCodekey = 1;
          this.goodCodeLength = this.queryParams.goodCode;
        }
      });
      //this.queryParams.pageNum = 1;
      //this.getList();
    },
    /** 确认下单按钮操作 */
    enterQuery() {
      if (this.goodList.length <= 0) {
        this.$modal.msgError("请扫码");
        return false
      }
      let obj = {
        goodDtoList: []
      };
      var goodId = new Map(),
        price = new Map(),
        goodCount = new Map(),
        goodIdArr = [],
        priceArr = [],
        goodCountArr = []
      for (var i = 0; i < this.goodList.length; i++) {
        goodId.set(i, this.goodList[i].goodId)
        price.set(i, this.goodList[i].retailPrice)
        goodCount.set(i, this.goodList[i].goodCount)
      }
      goodIdArr = Array.from(goodId.values())
      priceArr = Array.from(price.values())
      goodCountArr = Array.from(goodCount.values())
      for (var j = 0; j < goodIdArr.length; j++) {
        var obj2 = {};
        obj2.goodId = goodIdArr[j];
        obj2.price = priceArr[j];
        obj2.goodCount = goodCountArr[j];
        obj.goodDtoList.push(obj2); //新数组
      }
      outBound(obj).then(response => {

        if (response.code == 200) {
          this.orderLists = response.data
          this.$modal.msgSuccess("已确认下单");
          this.resetQuery()
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.totalMoney = 0.00;
      this.goodList = [];
      this.queryParams.goodCode = '';
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBanner(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBanner(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除banner图片编号为"' + ids + '"的数据项？').then(function () {
        return delBanner(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/banner/export', {
        ...this.queryParams
      }, `banner_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
.invisible-element {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
</style>
